<import type="css" file="/home/css/toggle_img" />
<load href="__PUBLIC__/home/js/jquery.carouFredSel-5.2.3-packed.js" />

		<script type="text/javascript" language="javascript">
			$(function() {
				$('#thumbs .thumb a').each(function(i) {
					$(this).addClass( 'itm'+i );
					$(this).click(function() {
						$('#images').trigger( 'slideTo', [i, 0, true] );
						return false;
					});
				});
				$('#thumbs a.itm0').addClass( 'selected' );
				
				$('#images').carouFredSel({
					direction: 'left',
					circular: true,
					infinite: false,
					items: 1,
					auto: true,
					scroll: {
						fx: 'directscroll',
						onBefore: function() {
							var pos = $(this).triggerHandler( 'currentPosition' );
							$('#thumbs a').removeClass( 'selected' );
							$('#thumbs a.itm'+pos).addClass( 'selected' );
							var page = Math.floor( pos / 3 );
							$('#thumbs').trigger( 'slideToPage', page );
						}
					}
				});
				$('#thumbs').carouFredSel({
					direction: 'left',
					circular: true,
					infinite: false,
					items: 3,
					align: false,
					auto: false,
					prev: '#prev',
					next: '#next'
				});
				
			});
		</script>
		<div id="container">
		<div id="gallery">
			<div id="main">
				<div id="images">
					<div class="slide">
						<a href=""></a>
						<a href="javascript:;"><img src="__PUBLIC__/home/image/large/1.jpg" alt=""  /></a>
					</div>
					<div class="slide">
						<a href=""></a>
						<a href="javascript:;"><img src="__PUBLIC__/home/image/large/2.jpg" alt=""  /></a>
					</div>	
					<div class="slide">
						<a href=""></a>
						<a href="javascript:;"><img src="__PUBLIC__/home/image/large/3.jpg" alt=""  /></a>
					</div>
					<div class="slide">
						<a href=""></a>
						<a href="javascript:;"><img src="__PUBLIC__/home/image/large/4.jpg" alt=""  /></a>			
					</div>
				</div>
			</div>
			<div id="thumbs">
				<div class="thumb">
					<a href=""></a>
					<img src="__PUBLIC__/home/image/small/1.jpg" alt=""  />
				</div>
				<div class="thumb">
					<a href=""></a>
					<img src="__PUBLIC__/home/image/small/2.jpg" alt=""  />
				</div>
				<div class="thumb">
					<a href=""></a>
					<img src="__PUBLIC__/home/image/small/3.jpg" alt=""  />
				</div>
				<div class="thumb">
					<a href=""></a>
					<img src="__PUBLIC__/home/image/small/4.jpg" alt=""  />				
				</div>
			</div>
			<a href="#" class="thumbs" id="prev">Previous</a>
			<a href="#" class="thumbs" id="next">Next</a>
		</div>
		
		<div class="clear"></div>
		</div>	
		
